<template>
  <div>
    <el-card>
      <!-- 卡片头部 -->
      <infoHeader/>
      <div class="info">
     <div class="table">
       <table>
         <tr>
            <td class="col">驾驶员</td>
            <td>李志琪</td>
            <td class="col">身份证号</td>
            <td>232482983748933</td>
         </tr>
         <tr>
           <td class="col">号牌类型</td>
            <td>黄牌</td>
            <td class="col">号牌号码</td>
            <td>冀A2376483</td>
         </tr>
         <tr>
            <td class="col">申请人类型</td>
            <td>个人</td>
            <td class="col">通行证类型</td>
            <td>短期通行证</td>
         </tr>
         <tr>
            <td class="col">申请日</td>
            <td>2019-10-24</td>
            <td class="col">起止时间</td>
            <td>2019-10-09 —— 2019-10-17</td>
         </tr>
         <tr>
           <td class="col">申请的线路</td>
           <td colspan="3">唐山，北京路，长寿路，沧州</td>
         </tr>
         <tr>
           <td class="col">起止位置</td>
           <td colspan="3">唐山，北京路，长寿路，沧州</td>
         </tr>
       </table>
     </div>
      <div class="imgInfo">
        <imgCard v-for="(item,i) in srcList1" :key=i :src="srcList1[i]" width="250" height="260" />
      </div>
     </div>
      <!-- <el-collapse accordion >
        <el-collapse-item> -->
          <!-- <template slot="title">
          历史申请记录
          </template> -->
          <!-- 申请历史记录 -->
          <div class="tabInfo">
            <el-table :data="licenseApplyRecord" style="width: 100% margin-bottom:10px" empty-text="无" :header-cell-style="tdStyle">
              <el-table-column label="申请时间" >
              </el-table-column>
              <el-table-column prop="licenseType" label="通行证类型">
              </el-table-column>
              <el-table-column prop="applyRoute" label="申请的线路">
              </el-table-column>
              <el-table-column prop="" label="起止位置" >
                河北省唐山市丰润区邱柳线 —— 河北省唐山市路南区复兴路
              </el-table-column>
              <el-table-column prop="status" label="申请状态">
              </el-table-column>
            </el-table>
          </div>
        <!-- </el-collapse-item>
      </el-collapse> -->
      <!-- 拒绝反馈 -->
      <feedback @getComment="getComment"/>
      <!-- 按钮组 -->
      <div class="buttons">
          <el-button type="primary" size="large">上一页</el-button>
          <el-button type="success" size="large">批准</el-button>
          <el-button type="danger" size="large" >拒绝</el-button>
          <el-button type="primary" size="large">下一页</el-button>
      </div>
    </el-card>
  </div>
</template>
<style lang="css" scoped>
  table,tr,td{
    border: 1px solid #ccc;
  }
  .table {
    width: 100%;
  }
  .col {
    width: 100px;
  }
  table{
    width:98%;
    border-collapse: collapse;
  }
  td{
    padding:10px;
  }
.info{
  margin: 20px 0;
  /* align-items: center; */
  /* justify-content: space-between */
}
.imgInfo{
  display: flex;
  justify-content: space-between;
  flex-flow: wrap
}
 .list-group{
  width: 550px;
}

.list-group-item:first-child {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 1rem 1rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item-action {
    width: 100%;
    color: #495057;
    text-align: inherit;
}
a{
  cursor: pointer;
}

.imgCard{
  margin:  10px;
}
/* .list-group-item-primary {
    color:
#004085;
background-color:
    #b8daff;
}
.list-group-item-secondary {
    color:
#383d41;
background-color:
    #d6d8db;
}
.list-group-item-success {
    color:
#155724;
background-color:
    #c3e6cb;
}
.list-group-item-danger {
    color:
#721c24;
background-color:
    #f5c6cb;
}
.list-group-item-warning {
    color:
#856404;
background-color:
    #ffeeba;
}
.list-group-item-info {
    color:
#0c5460;
background-color:
    #bee5eb;
}
.list-group-item-dark {
    color:#1b1e21;
background-color:
    #c6c8ca;
} */
/*按钮组*/
  .buttons{
    display: flex;
    justify-content:space-between;
    margin-top: 20px;
  }
  .el-button{
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
      width: 130px;
      height: 45px;
    }

</style>

<script>
import infoHeader from '@/components/infoHeader'
import imgCard from '@/components/imgCard'
import feedback from '@/components/feedback'
import { getLicenseInfo, checkLicense } from '@/api/licenseApplication'
export default {
  data () {
    return {
      tdStyle: {
        fontSize: '16px'
      },
      // 反馈数据
      id: this.$route.params.id,
      tableData: {},
      comment: '',
      status1: '',
      status2: '',
      enterprise: false,
      flag3: true,
      licenseApplyRecord: [],
      srcList1: [
        'http://passport.banging.cn/FmQz2BlUM9526vmldnxbKbmEgrmq',
        'http://passport.banging.cn/FnS5nIAbNOlYsph4VwmhRe4QR6-N',
        'http://passport.banging.cn/FmTSB9juLRWkneJpa7ioT9wlnQeY',
        'http://passport.banging.cn/Fh-o5hWq6WJ9gTl4Wo7hQYAssfML',
        'http://passport.banging.cn/FiN3aIzMG0SLODSLBJWgNQeCOfw3',
        'http://passport.banging.cn/Fht-Wlb-8g-_Jp_5ePgjhIZyNoHb',
        'http://passport.banging.cn/FmQz2BlUM9526vmldnxbKbmEgrmq',
        'http://passport.banging.cn/FnS5nIAbNOlYsph4VwmhRe4QR6-N',
        'http://passport.banging.cn/FmTSB9juLRWkneJpa7ioT9wlnQeY',
        'http://passport.banging.cn/Fh-o5hWq6WJ9gTl4Wo7hQYAssfML'
      ],
      srcList2: [

      ]
    }
  },
  metdods: {
    getComment (data) {
      this.comment = data
    },
    getLicenseInfo () {
      getLicenseInfo(this.id).tden((result) => {
        console.log(result)
        this.tableData = result.licenseApplyInfo
        this.licenseApplyRecord = result.licenseApplyRecord
        // if (result.licenseApplyInfo.licenseImageCompany !== null) {
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.licenseFront)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.licenseBack)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.velicenseFront)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.velicenseBack)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.carFront)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.carBack)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.contract)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.licenseA)
        //   this.srcList1.push(result.licenseApplyInfo.licenseImageCompany.licenseB)
        // }
        if (result.licenseApplyInfo.status === 1) {
          this.status1 = '已批准'
          this.flag1 = true
        } else {
          this.status1 = '批准'
          this.flag1 = false
        }
        if (result.licenseApplyInfo.status === 2) {
          this.status2 = '已拒绝'
          this.flag2 = true
        } else {
          this.status2 = '拒绝'
          this.flag2 = false
        }
      }).catch(err => {
        console.log('err', err)
      })
    }
  },
  created () {
    this.getLicenseInfo()
  },
  components: {
    infoHeader,
    imgCard,
    feedback

  }
}
</script>
